<template>
  <div>
    <el-button type="primary"
               @click="openDiage">导出文件</el-button>

    <el-dialog title="添加信息"
               :visible.sync="dialogVisible"
               width="50%">
      <!--Diage内容主体区域-->
      <el-form ref="exportFormRef"
               :model="addform"
               label-width="80px">
        <el-form-item label="导出内容"
                      prop="query">
          <el-input v-model="addform.query"
                    placeholder="请输入学院或者班级或者楼宇"></el-input>
        </el-form-item>
      </el-form>
      <!--内容主体底部-->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="exportExcel">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>

export default {
  name: 'exportExcel',
  props: {
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      // 导出excel的表头和表头对应的字段
      tableTitleData: [
        {
          label: '学号',
          prop: 'studentNumber'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '学院',
          prop: 'college'
        },
        {
          label: '班级',
          prop: 'class'
        },
        {
          label: '宿舍',
          prop: 'tower'
        },
        {
          label: '宿舍号',
          prop: 'dorm'
        },
        {
          label: '电话',
          prop: 'tel'
        }
      ],
      addform: {
        query: ''
      },
      exportList: []
    }
  },
  methods: {
    // 打开Diage
    openDiage () {
      this.dialogVisible = true
    },
    // 导出excel
    async exportExcel () {
      const { data: res } = await this.$axios.get('/student/exportExcel', {
        params: {
          query: this.addform.query
        }
      })
      if (res.code !== 0) {
        this.$refs.exportFormRef.resetFields()
        this.dialogVisible = false
        return this.$message.warning(res.msg)
      } else {
        // var _this = this
        // 保存数据
        this.exportList = res.result
        // 设置表头
        const columnNames = []
        // 设置表头对应的字段，也就是属性
        const columnValues = []
        this.tableTitleData.forEach(valid => {
          columnNames.push(valid.label)
          columnValues.push(valid.prop)
        })
        require.ensure([], () => {
          // 注意exportjsontoexcel方法，这里因为使用了eslint，所以不能写带有下划线的方法名，所以写成exportjsontoexcel，需要去到Export2Excel修改对应方法
          const { exportjsontoexcel } = require('vendor/Export2Excel.js')
          const tHeader = columnNames
          const filterVal = columnValues
          // 数据
          const list = this.exportList
          // 转换json
          const data = this.formatJson(filterVal, list)
          // 导出
          exportjsontoexcel(tHeader, data, this.addform.query + '学生信息')
        })
        this.dialogVisible = false
        this.$message.success('表格已下载，请自行打开本地路径查看')
        // 延迟清空，让addform.query的值保留1s
        setTimeout(() => {
          this.$refs.exportFormRef.resetFields()
        }, 1000)
      }
    },
    // 对导出的excel文件格式化成json
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }

}

</script>
<style lang='' scoped>
</style>
